<template>
  <view class="content">
    <view class="edit-box">
      <view class="edit-list" @click="getAddress()">
        <view class="wrap" type="text" >
          <view class="region edit-span">请选择地区：</view>
          <view class="le">{{chooseLocation}}</view>
        </view>
      </view>
      <view class="edit-list">
        <text class="edit-span">门牌地址</text>
        <view class="edit-list-txt">
          <input class="edit-h5" type="text" v-model="data.doorplate" />
        </view>
      </view>
      <view class="edit-list">
        <text class="edit-span">联系人</text>
        <view class="edit-list-txt">
          <input type="text" class="edit-mc" v-model="data.linkman" />
        </view>
      </view>
      <view class="edit-list">
        <text class="edit-span">性别</text>
        <view class="edit-list-txt">
          <view class="edit-xb">
            <radio-group @change="radioChange">
              <label>
                <radio value="男" color="#f6640d" :checked="data.gender=='男'?'true':''" />
                <text>男</text>
              </label>
              <label>
                <radio value="女" color="#f6640d" :checked="data.gender=='女'?'true':''" />
                <text>女</text>
              </label>
            </radio-group>
          </view>
        </view>
      </view>
      <view class="edit-list">
        <text class="edit-span">手机号</text>
        <view class="edit-list-txt">
          <input type="text" class="shj-hao" v-model="data.phone" />
        </view>
      </view>
      <view class="edit-list">
        <text class="edit-span">是否默认</text>
        <view class="edit-list-txt">
          <view class="edit-xb">
            <checkbox-group @change="checkboxChange">
              <label class="checkbox">
                <checkbox color="#FF0000" value="1" />
              </label>
            </checkbox-group>
          </view>
        </view>
      </view>
    </view>
    <view class="edit-btnx">
      <button type="default" class="edit-bc-btn" @click="baocun">保存地址</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: {
        address: "",
        linkman: "",
        gender: "",
        phone: "",
        doorplate: "",
        lng: "",
        lat: "",
        is_default: 0
      },
      chooseLocation: "",
      lng: "",
      lat: ""
    };
  },
  onLoad(id) {},
  onShow() {
    const chooseLocation = requirePlugin("chooseLocation");
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    console.log("您所选择的位置：", location);
    if (location) {
      this.chooseLocation = location.address + location.name;
      this.data.lng = location.longitude;
      this.data.lat = location.latitude;
    }
  },
  onUnload() {
    const chooseLocation = requirePlugin("chooseLocation");
    // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
    chooseLocation.setLocation(null);
  },
  methods: {
    baocun() {
      if (this.chooseLocation == "") {
        wx.showToast({
          title: "请选择地址！",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.data.doorplate == "") {
        wx.showToast({
          title: "请填写门牌地址！",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.data.linkman == "") {
        wx.showToast({
          title: "请填写联系人！",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.data.gender == "") {
        wx.showToast({
          title: "请选择性别！",
          icon: "none",
          duration: 2000
        });
        return;
      }

      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(this.data.phone)) {
        wx.showToast({
          title: "请填写正确的手机号！",
          icon: "none",
          duration: 2000
        });
        return;
      }

      var than = this;
      this.data.address = this.chooseLocation;
      uni.request({
        url: getApp().globalData.http + "/address/create",
        data: {
          ...this.data
        },
        method: "post",
        header: {
          "content-type": "application/x-www-form-urlencoded",
          token: uni.getStorageSync("token")
        },
        success: res => {
          console.log(res);
          if (res.data.code == 1) {
            uni.navigateBack({
              delta: 1
            });
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000
            });
          }
        }
      });
    },
    getAddress() {
      const key = "2EXBZ-GUPEU-7T6VS-23PQ4-3IXF2-C7BI4"; //使用在腾讯位置服务申请的key
      const referer = "花儿私厨"; //调用插件的app的名称
      const sig = "p5HReDVcvnB5uXKHbdoCPFKHtgBZ7Dqs";
      const location = JSON.stringify({
        latitude: uni.getStorageSync("latitude"),
        longitude: uni.getStorageSync("longitude")
      });
      const category = "";
      wx.navigateTo({
        url:
          "plugin://chooseLocation/index?key=" +
          key +
          "&referer=" +
          referer +
          "&location=" +
          location +
          "&category=" +
          category
      });
    },
    shanchu() {
      var than = this;
      uni.request({
        url: getApp().globalData.http + "/address/delete",
        data: {
          id: this.data.id
        },
        method: "post",
        header: {
          "content-type": "application/x-www-form-urlencoded",
          token: uni.getStorageSync("token")
        },
        success: res => {
          console.log(res);
          if (res.data.code == 1) {
            uni.navigateBack({
              delta: 1
            });
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000
            });
          }
        }
      });
    },
    radioChange(e) {
      this.data.gender = e.detail.value;
    },
    checkboxChange(e) {
      if (e.detail.value.length) {
        this.data.is_default = 1;
      } else {
        this.data.is_default = 0;
      }
    }
  }
};
</script>
